<template>
  <div class="details-page">
    <view class="header">
      <table class="details-page-table">
        <tr>
          <td class="label-td">状态</td>
          <td>{{ MOVE_TEXT[inventoryData.status] }}</td>
          <td class="label-td">申请人</td>
          <td>{{ inventoryData.creatorName }}</td>
          <td class="label-td">申请时间</td>
          <td>{{ timestampToDate(inventoryData.createTime) }}</td>
        </tr>
        <tr>
          <td class="label-td">计划日期</td>
          <td>{{ timestampToDate(inventoryData.scheduledFinishTime) }}</td>

          <td class="label-td">确认时间</td>
          <td>{{ timestampToDate(inventoryData.finishedDate) }}</td>
          <td class="label-td">备注</td>
          <td colspan="5">
            {{ inventoryData.remark }}
          </td>
        </tr>
      </table>
    </view>

    <view class="content">
      <scroll-view scroll-y="true" class="scroll-view-style">
        <view
          v-for="(item, index) in rackListData"
          :key="index"
          class="list-item"
        >
          <view class="list-item-line">
            <view class="list-item-line-text">
              <text>序号：</text> <text>{{ index + 1 }}</text></view
            >
            <view class="list-item-line-text">
              <!-- <text>物资类型：</text> -->
              <text class="status" :class="MOVE_STATUS[item.status]">{{
                MOVE_TEXT[item.status]
              }}</text>
            </view>
          </view>

          <view class="list-item-line">
            <view class="list-item-line-text">
              <text>完成时间：</text>
              <text>{{ timestampToDate(item.finishedDate) }}</text></view
            >
          </view>

          <view class="list-item-line">
            <view class="list-item-line-text">
              <text>备注：</text> <text>{{ item.remark || "---" }}</text></view
            >
          </view>
          <view class="list-item-line">
            <view class="list-item-line-text big">
              <text>盘点货架：</text>
              <text>{{ rackCodeMap[item.rackId] }}</text></view
            >
          </view>
          <!-- <view class="list-item-line right">
            <view class="list-item-line-text">
              <text @click="toDetailsListPage(item)">盘点详情</text>
            </view>
          </view> -->
        </view>
      </scroll-view>
    </view>
    <view class="bottom-btn">
      <!-- 接收确认 -- 取消和确认按钮 -->
      <view class="back-btn btn" @click="cancelPage">返回</view>
      <view class="confirm-btn btn" @click="toDetailsListPage" v-if="!inventory"
        >盘点详情</view
      >

      <view class="confirm-btn btn" @click="scanShelves" v-if="inventory"
        >扫描货架</view
      >
    </view>

    <!-- 扫码弹出弹框 -->
    <uni-popup
      ref="popup"
      type="center"
      :is-mask-click="false"
      border-radius="10px 10px 0 0"
    >
      <view class="popup-content">
        <view class="container-code">
          <view class="successful">匹配成功</view>
          <view class="rack-code">{{
            rackCodeMap[targetRACK.rackId]
          }}</view></view
        >
        <!-- 取消和确认按钮 -->

        <view class="container-btn">
          <view class="cancel-btn btn" @click="closeContainer">取消</view>
          <view class="confirm-btn btn" @click="continueInventorying"
            >继续盘点</view
          >
        </view>
      </view>
    </uni-popup>
  </div>
</template>

<script>
import {
  getInventoryTaskDetailsBase, //获取库存任务详情
  getRackList, //获取货位列表
  getRackCodeMap, //获取货位编码映射
} from "@/service/inventory";
import { buildGetUrl, timestampToDate } from "@/common/utils";
import { RESPONSE_CODE, MOVE_TEXT, MOVE_STATUS } from "@/common/constant";
export default {
  data() {
    return {
      MOVE_TEXT,
      MOVE_STATUS,
      timestampToDate,
      queryId: "",
      inventoryData: {},
      rackListData: [],
      rackCodeMap: {},
      inventory: false,
      targetRACK: null,
    };
  },
  onShow() {
    this.loadData();
  },
  onLoad(options) {
    this.queryId = options.id;
    if (options.mark === "inventory") {
      this.inventory = true;
    }
  },
  methods: {
    // 扫码后继续盘点
    continueInventorying() {
      this.toDetailsListPage("inventory");
    },
    closeContainer() {
      this.targetRACK = null;
      this.$refs.popup.close();
    },
    // 扫描货架
    scanShelves() {
      this.targetRACK = null;
      uni.scanCode({
        // 扫码成功的回调函数
        success: (res) => {
          if (!res.result.includes("|")) {
            uni.showToast({
              title: "请扫描正确货架",
              icon: "error",
            });
            return;
          }
          const arr = res.result.split("|");
          if (arr[0] !== "RACK") {
            uni.showToast({
              title: "请扫描正确货架",
              icon: "error",
            });
            return;
          }
          this.rackListData.forEach((item) => {
            console.log("item.rackId", item.rackId, "arr[1]", arr[1]);
            if (item.rackId == arr[1]) {
              this.targetRACK = item;
            }
          });
          if (this.targetRACK == null) {
            uni.showToast({
              title: "扫码货架未匹配",
              icon: "error",
            });
          } else {
            this.$refs.popup.open();
          }
        },
        // 扫码失败的回调函数
        fail: (err) => {
          console.log("扫描失败：", err);
        },
      });
    },
    // 跳转出库页面
    toDetailsListPage(mark) {
      let url = `/pages/taskPage/inventory/inventoryDetails?id=${this.queryId}&orderNumber=${this.inventoryData.orderNumber}`;
      if (mark) {
        url += `&mark=${mark}`;
      }
      uni.navigateTo({
        url: url,
      });
    },

    cancelPage() {
      uni.navigateBack({
        delta: 1,
      });
    },

    // 确认接受
    confirmPage() {
      // 二次确认
      uni.showModal({
        title: "提示",
        content: "是否确认准备完成?",
        success: (res) => {
          if (res.confirm) {
            const params = {
              id: this.queryId,
            };
            const query = buildGetUrl(params);
            confirmCheckReady(query).then((res) => {
              if (res.code === RESPONSE_CODE.SUCCESS) {
                uni.showToast({
                  title: "确认成功",
                  icon: "success",
                });
                // 返回上一页并刷新
                uni.navigateBack({
                  delta: 1,
                });
              } else {
                uni.showToast({
                  title: res.msg,
                  icon: "error",
                  style: {
                    width: "80%", // 设置宽度，使其能够容纳更多文字
                  },
                });
              }
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },

    // 加载基础信息
    async loadData() {
      const params = {
        id: this.queryId,
      };
      const query = buildGetUrl(params);
      const res = await getInventoryTaskDetailsBase(query);
      if (res.code === RESPONSE_CODE.SUCCESS) {
        uni.setNavigationBarTitle({
          title: `盘点货架-${res.data.orderNumber}`,
        });
        this.inventoryData = res.data;
      }
      this.getInventoryList();
    },
    // 加载列表信息
    async getInventoryList() {
      const params = {
        id: this.queryId,
      };
      const query = buildGetUrl(params);
      const listRes = await getRackList(query);
      const idArr = [];
      if (listRes.code === RESPONSE_CODE.SUCCESS) {
        this.rackListData = listRes.data;
        // 将rackListData中每一项rackId组成新数组
        this.rackListData.forEach((item) => {
          if (item.rackId) {
            idArr.push(item.rackId);
          }
        });
        this.getRackCodeMapFn(idArr);
      }
    },

    // 获取货架映射
    async getRackCodeMapFn(idArr) {
      const batchRes = await getRackCodeMap(idArr);
      if (batchRes.code === RESPONSE_CODE.SUCCESS) {
        this.rackCodeMap = batchRes.data;
        // console.log(batchRes.data);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.details-page {
  .header {
    background: #ecf5ff;
    padding: 10rpx;
    padding-bottom: 0rpx;
  }
  .details-page-table {
    width: 100%;
    // 边框合并
    border-collapse: collapse;
    font-size: 20rpx;
    color: #777;
    background: #fff;
    border-radius: 14rpx;
    tr,
    td {
      line-height: 40rpx;
      border: 1rpx solid #eee;
    }
    td:nth-child(odd) {
      text-align: center;
      background-color: #ebeef5;
    }
    td:nth-child(even) {
      padding-left: 10rpx;
    }
    .label-td {
      width: 100rpx;
    }
  }
  .scroll-view-style {
    height: 100%;
    padding: 10rpx;
    box-sizing: border-box;
  }
  .content {
    height: calc(100vh - 180rpx);
    background: #ecf5ff;

    .list-item {
      font-size: 12px;
      margin-bottom: 10rpx;
      background: #fff;
      border-radius: 14rpx;
      padding: 10rpx 20rpx;
      box-sizing: border-box;
      position: relative;
      .confirm-text {
        position: absolute;
        right: 20rpx;
        bottom: 10rpx;
        color: red;
        padding: 4rpx;
        font-size: 30rpx;
        text-align: center;
        border: 4rpx solid red;
        // 旋转
        transform: rotate(-30deg);
        .jieshou {
          font-size: 40rpx;
        }
      }
      .list-item-line {
        display: flex;
        justify-content: space-between;
        line-height: 50rpx;
        color: #777;
        .big {
          font-size: 40rpx;
          color: #409eff;
        }
        .left-auto {
          flex: 1;
          display: flex;
          // 靠左对齐
          justify-content: flex-start;
          // 换行
          flex-wrap: wrap;
        }
        .batch-item {
          border: 1rpx solid #d9ecff;
          color: #409eff;
          background: #ecf5ff;
          padding: 0 20rpx;
          margin-right: 10rpx;
          display: flex;
          // 水平居中
          align-items: center;

          .del-icon {
            margin-left: 10rpx;
            color: red !important;
          }
        }
      }
      .right {
        justify-content: flex-end;
        text {
          margin-left: 40rpx;
          color: #409eff;
        }
      }
      .material {
        border: 1rpx solid #d9ecff;
        color: #409eff;
        background: #ecf5ff;
        padding: 0 10rpx;
        box-sizing: border-box;
        border-radius: 5rpx;
        font-size: 20rpx;
      }
    }
  }
  .bottom-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80rpx;
    overflow: hidden;
    display: flex;
    .btn {
      flex: 1;
      text-align: center;
      line-height: 80rpx;
      background: #f0f0f0;
    }
    .confirm-btn {
      color: #fff;
      background: #409eff;
    }
  }

  .popup-content {
    background: #fff;
    width: 500rpx;
    border-radius: 10rpx;
    padding: 10rpx 20rpx;
    .popup-title {
      font-size: 24rpx;
      line-height: 60rpx;
    }
    .uni-input {
      height: 60rpx;
      padding-left: 20rpx;
      font-size: 24rpx;
      border: 1rpx solid #eee;
    }
    .split-btn {
      margin-top: 20rpx;
      display: flex;
      justify-content: space-between;
      line-height: 80rpx;
      text-align: center;
      .btn {
        flex: 1;
        background: #f0f0f0;
        font-size: 24rpx;
      }
      .confirm-btn {
        color: #fff;
        background: #409eff;
      }
    }
  }
  .container-code {
    text-align: center;
    line-height: 70rpx;
    .successful,
    .rack-code {
      text-align: center;
      font-size: 60rpx;
      color: #67c23a;
    }
    .rack-code {
      margin-top: 20rpx;
      color: #409eff;
    }
  }

  .scroll-view-style-container {
    max-height: 600rpx;
  }

  .container-item {
    font-size: 12px;
    margin-bottom: 10rpx;
    background: #fff;
    border-radius: 14rpx;
    padding: 10rpx 20rpx;
    box-sizing: border-box;
    position: relative;

    .list-item-line {
      display: flex;
      justify-content: space-between;
      line-height: 50rpx;
      color: #777;
    }

    .material {
      border: 1rpx solid #d9ecff;
      color: #409eff;
      background: #ecf5ff;
      padding: 0 10rpx;
      box-sizing: border-box;
      border-radius: 5rpx;
      font-size: 20rpx;
    }
  }
  .container-btn {
    margin-top: 20rpx;
    display: flex;
    justify-content: space-between;
    line-height: 80rpx;
    text-align: center;
    .btn {
      flex: 1;
      background: #f0f0f0;
      font-size: 24rpx;
    }
    .confirm-btn {
      color: #fff;
      background: #409eff;
    }
  }
}
</style>
